<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>PC extension | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/35.c97bfd00.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/mui-player-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/mui-player-desktop-plugin.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/mui-player-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/mui-player-desktop-plugin.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/guide/begin.html" class="sidebar-link">Quick start</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/begin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/begin.html#usage" class="sidebar-link">usage</a></li></ul></li><li><a href="/guide/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/api.html#main-configuration" class="sidebar-link">Main configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#custom-configuration" class="sidebar-link">Custom configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#play-event-monitoring" class="sidebar-link">Play event monitoring</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#player-interface" class="sidebar-link">Player interface</a></li></ul></li><li><a href="/guide/mui-player-desktop-plugin.html" aria-current="page" class="active sidebar-link">PC extension</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration" class="sidebar-link">Custom settings group configuration</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#customize-the-right-click-menu" class="sidebar-link">Customize the right click menu</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/plus-desktop-plugin.html" class="sidebar-link">Pc extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#configuration-options-plus" class="sidebar-link">Configuration options plus</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#interface-plus" class="sidebar-link">Interface plus</a></li></ul></li><li><a href="/guide/plus-mobile-plugin.html" class="sidebar-link">Mobile extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#scan-qr-code" class="sidebar-link">Scan QR code</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/preset.html" class="sidebar-link">MediaSource support</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/preset.html#use-hls-js-or-flv-js" class="sidebar-link">Use hls.js or flv.js</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#custom-use-mse-library" class="sidebar-link">Custom use MSE library</a></li></ul></li><li><a href="/guide/thumbnails.html" class="sidebar-link">Video thumbnail</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/barrage.html" class="sidebar-link">Video danmaku</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/barrage.html#use-commentcorelibrary" class="sidebar-link">Use CommentCoreLibrary</a></li></ul></li><li><a href="/guide/subtitle.html" class="sidebar-link">Video subtitles</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/custom-control.html" class="sidebar-link">Custom player controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/custom-control.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-1-customize-the-player-header-button" class="sidebar-link">Example 1: Customize the player header button</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player" class="sidebar-link">Example 2: Customize the buttons at the bottom of the player</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar" class="sidebar-link">Example 3: Customize the pop-up window on the right sidebar</a></li></ul></li><li><a href="/guide/uni-app.html" class="sidebar-link">Use in uni-app</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/other-problem.html" class="sidebar-link">other problems</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="pc-extension"><a href="#pc-extension" class="header-anchor">#</a> PC extension</h1> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>mui-player-desktop-plugin.js is a player extension plug-in. The extension plug-in enhances the use of the player in PC application scenarios. It provides the ability to control the player including the mouse and keyboard, setting groups, volume adjustment, and video Functional components such as thumbnail configuration.</p></div> <!----> <h2 id="installation"><a href="#installation" class="header-anchor">#</a> installation</h2> <p>Install using npm:</p> <div class="language- extra-class"><pre class="language-text"><code>npm i mui-player-desktop-plugin
</code></pre></div><p>Install using yarn:</p> <div class="language- extra-class"><pre class="language-text"><code>yarn add mui-player-desktop-plugin
</code></pre></div><h2 id="start-using"><a href="#start-using" class="header-anchor">#</a> start using</h2> <p>Introduce <strong>mui-player-desktop-plugin.js</strong> on the page , the plug-in needs to be loaded before initializing the player</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Use the script tag to import --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>js/mui-player-desktop-plugin.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Use the module manager to introduce plugins</span>
<span class="token keyword">import</span> MuiPlayerDesktopPlugin <span class="token keyword">from</span> <span class="token string">'mui-player-desktop-plugin'</span>
</code></pre></div><p>Pass in the main configuration item plugins</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>

    plugins<span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            customSetting<span class="token punctuation">,</span> <span class="token comment">// Set up group configuration</span>
            contextmenu<span class="token punctuation">,</span> <span class="token comment">// Right-click menu group configuration</span>
            thumbnails<span class="token punctuation">,</span>  <span class="token comment">// Thumbnail configuration</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="configuration-options"><a href="#configuration-options" class="header-anchor">#</a> Configuration options</h2> <p>Extension plug-in configurable API</p> <table><thead><tr><th>Attribute name</th> <th>Types of</th> <th>Defaults</th> <th>Description</th></tr></thead> <tbody><tr><td>customSetting</td> <td>Array</td> <td>{functions:'Loop play',name:'loopPlay'},<br><br>{functions:'Playback speed',name:'playbackRate'}</td> <td>Custom setting group,<a href="#custom-settings-group-configuration">see</a></td></tr> <tr><td>customSetting.functions</td> <td>String</td> <td></td> <td>Group name</td></tr> <tr><td>customSetting.name</td> <td>String</td> <td></td> <td>Group distinguished name. If the name is the same as the name in the default configuration group, the default configuration group menu will be overwritten</td></tr> <tr><td>customSetting.model</td> <td>String</td> <td>select</td> <td>Group selection mode, optional switch | select</td></tr> <tr><td>customSetting.selected</td> <td>Boolean</td> <td>false</td> <td>Whether the current selection is selected by default</td></tr> <tr><td>customSetting.show</td> <td>Boolean</td> <td>true</td> <td>Whether to show</td></tr> <tr><td>customSetting.zIndex</td> <td>Number</td> <td>0</td> <td>Group display level, the larger the zIndex, the higher the order of the group</td></tr> <tr><td>customSetting.childConfig</td> <td>Array</td> <td>[]</td> <td>Child setting group configuration, the configuration parameters are the same as the parent setting group parameters</td></tr> <tr><td>customSetting.onToggle</td> <td>Function</td> <td>callback(  data,  selected,  back)</td> <td>The callback function after the group option is clicked, receives three parameters for processing actions:<br><br>1. data: currently selected configuration item<br>2. selected: function, you must manually call this function to select the item<br>3. back: function, call this function to trigger the return to the parent setting group, the parameter can receive a number in milliseconds to indicate the delayed return</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>contextmenu</td> <td>Array</td> <td>{name:'shortcuts',<br>context:'Shortcuts'},<br><br>{name:'muiplayer',<br>context:'MuiPlayer'}</td> <td>Customize the right-click menu, <a href="#customize-the-right-click-menu">reference</a></td></tr> <tr><td>contextmenu.name</td> <td>String</td> <td></td> <td>Menu identification name, if the name is the same as a name in the right-click menu group, then the default menu group will be overwritten</td></tr> <tr><td>contextmenu.context</td> <td>String</td> <td></td> <td>Right-click the menu name</td></tr> <tr><td>contextmenu.zIndex</td> <td>Number</td> <td></td> <td>Group display level, the larger the zIndex, the higher the order of the group</td></tr> <tr><td>contextmenu.show</td> <td>Boolean</td> <td></td> <td>Whether to show</td></tr> <tr><td>contextmenu.click</td> <td>Function</td> <td>callback(close)</td> <td>Callback function after click. [Close: function, call the function actively to close the right-click menu]</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>thumbnails</td> <td>Object</td> <td>{}</td> <td>Thumbnail configuration, <a href="/thumbnails/">see</a></td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>fullScaling</td> <td>Number</td> <td>1.2</td> <td>The zoom ratio of the control size in full screen, the value is &gt;= 1</td></tr> <tr><td>leaveHiddenControls</td> <td>Boolean</td> <td>false</td> <td>Whether to hide the controls when the mouse pointer moves out of the player</td></tr></tbody></table> <h2 id="custom-settings-group-configuration"><a href="#custom-settings-group-configuration" class="header-anchor">#</a> Custom settings group configuration</h2> <p>You can customize the configuration setting group to meet the need to add the menu. The setting menu supports two selection modes, namely switch mode and select mode.</p> <p>The default setting group of the player includes loop playback and switching of the playback speed, which are not supported in live mode (live). The setting group can be customized by configuring the customSetting Option, configuration examples illustrate:</p> <p><strong>customSetting.js</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
	<span class="token punctuation">{</span>
		functions<span class="token operator">:</span><span class="token string">'Clarity'</span><span class="token punctuation">,</span>
		model<span class="token operator">:</span><span class="token string">'select'</span><span class="token punctuation">,</span>
		show<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
		zIndex<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>
		childConfig<span class="token operator">:</span><span class="token punctuation">[</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'1080P'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'HD'</span><span class="token punctuation">,</span>selected<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'SD'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">]</span><span class="token punctuation">,</span>
		<span class="token function-variable function">onToggle</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>selected<span class="token punctuation">,</span>back</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// Action</span>
        <span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> customSetting <span class="token keyword">from</span> <span class="token string">'./customSetting.js'</span>

<span class="token operator">...</span><span class="token operator">...</span>
<span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    customSetting<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="customize-the-right-click-menu"><a href="#customize-the-right-click-menu" class="header-anchor">#</a> Customize the right click menu</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    contextmenu<span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span><span class="token string">'share'</span><span class="token punctuation">,</span>
            context<span class="token operator">:</span><span class="token string">'Share'</span><span class="token punctuation">,</span>
            zIndex<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>
            show<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token function-variable function">click</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">close</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// Action...</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="action-event-monitoring"><a href="#action-event-monitoring" class="header-anchor">#</a> Action event monitoring</h2> <p>mui-player-desktop-plugin Provide the following specific behavior events：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// page fullscreen change when the trigger</span>
mp<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'pagefull-change'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>pagefull<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>事件名</th> <th>类型</th> <th>函数返回</th> <th>说明</th></tr></thead> <tbody><tr><td>pagefull-change</td> <td>EventHandle</td> <td>{ pagefull }</td> <td>Page fullscreen change when the trigger</td></tr> <tr><td>pip-change</td> <td>EventHandle</td> <td>{ pip }</td> <td>Paint in picture mode toggle when the trigger</td></tr></tbody></table></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/guide/mui-player-desktop-plugin.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/23/2023, 1:09:21 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/api.html" class="prev">
        API
      </a></span> <span class="next"><a href="/guide/plus-desktop-plugin.html">
        Pc extend【Professional edition】
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/35.c97bfd00.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
